<template>
  <div class="icons">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(page,index) in pages" :key="index">
        <div class="icon" v-for="(item,index) in page" :key="item.id">
          <img :src="item.imgUrl" alt="">
          <p>{{item.desc}}</p>
        </div>
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
    export default {
        name: "Homeicons",
      props:{
          icons:Array,
      },
      data(){
       return{
         swiperOption:{
           pagination:".swiper-pagination"
         },
         // imgurl:[
         //   {id:'001', url:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png", desc:'景点门游'},
         //   {id:'002', url:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/f0f00d6dfe038c044dbc9a437f58b0eb.png", desc:'一日游'},
         //   {id:'003', url:"http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png", desc:'北京必游'},
         //   {id:'004', url:"http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png", desc:'水上乐园'},
         //   {id:'005', url:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20191/0334cf5430b9b5505fd79e2b8d7e8670.png", desc:'爬长城'},
         //   {id:'006', url:"http://img1.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png", desc:'故宫'},
         //   {id:'007', url:"http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png", desc:'植物园'},
         //   {id:'008', url:"http://img1.qunarzz.com/piao/fusion/1803/fa/2548667cb6e902.png", desc:'动物园'},
         //   {id:'009', url:"http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png", desc:'植物园'},
         //   {id:'0010', url:"http://img1.qunarzz.com/piao/fusion/1803/fa/2548667cb6e902.png", desc:'动物园'},
         // ]
       }
      },
      computed:{
          pages(){
              const  pages=[]//定义一个空数组
             this.icons.forEach((item,index)=>{
             const page=  Math.floor(index/8)
               if (!pages[page]){
                 pages[page]=[]
               }
              pages[page].push(item)
            })
            return pages;
          }
          // pages(){
          //   let a = [];
          //   let obj = this.imgurl;
          //   for(let i = 0;i<obj.length;i++){
          //     var num = Math.floor(i/8);
          //     if(a[num]==undefined){
          //     a[num]=[];
          //     }
          //     a[num].push(obj[i])
          //   }
          //   return a;
          // }
      }
    }
</script>

<style lang="stylus" scoped>
  .icon >>>.swiper-pagination-bullet-active{
    background :#007aff;
  }
  .icon >>> .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
    bottom 1px;
  }
.icons{
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  overflow hidden
  .icon{
    width: 25%;
    height 0;
    padding-bottom 25%;
    text-align center;
    float left;
    img{
      width 60%;
      margin-top 0.07rem;
    }
    p{
      margin-top 0.03rem;
      color #6f6f6f;
      font-size 12px;
    }
  }
}

</style>
